<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>角色管理</title>
    <!-- myFontIcon CSS-->
    <link rel="stylesheet" href="../../static/css/myFontIcon.css" th:href="@{/css/myFontIcon.css}">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap3.4.1.min.css" th:href="@{/css/lib/bootstrap3.4.1.min.css}">
    <!-- Bootstrap-table CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap-table.min.css" th:href="@{/css/lib/bootstrap-table.min.css}">
    <!-- jquery-ui CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery-ui.min.css" th:href="@{/css/lib/jquery-ui.min.css}">
    <!-- bootstrap-select CSS-->
    <link href="../../static/css/file.css" rel="stylesheet" th:href="@{/css/file.css}">
    <link href="../../static/css/table.css" rel="stylesheet" th:href="@{/css/table.css}">
    <!-- Bootstrap-treeTable CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery.treegrid.min.css" th:href="@{/css/lib/jquery.treegrid.min.css}">
</head>

<body onload="init();">
    <div class="panel-body" style="padding-bottom:0;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <div class="form-group" style="margin-top:15px;">
                    <div class="row row-gap">
                        <label class="control-label col-sm-2 label-font" for="txt_search_name" title="角色名称">角色名称</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="txt_search_name">
                        </div>

                        <div class="col-sm-offset-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_filter" class="btn btn-primary" onclick="filter();">过滤</button>
                            <button type="button" style="margin-left:50px" id="btn_reset_filter" class="btn btn-primary" onclick="init();">重置过滤</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增角色
            </button>
        </div>
        <table id="table"></table>
    </div>

    <!-- 模态框（Modal） 查看 -->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="viewModalLabel">
                        查看角色信息
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <caption>角色信息</caption>
                        <tbody>
                        <tr>
                            <td>编号</td>
                            <td id="view_id">xxx</td>
                        </tr>
                        <tr>
                            <td>角色名称</td>
                            <td id="view_name">xxx</td>
                        </tr>
                        <tr>
                            <td>顺序</td>
                            <td id="view_seq">xxx</td>
                        </tr>
                        <tr>
                            <td>资源描述</td>
                            <td id="view_description">xxx</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） 编辑 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="editModalLabel">
                        编辑角色信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-success">
                            <label class="col-sm-4 control-label label-font" for="edit_id">角色编号</label>
                            <div class="col-sm-8">
                                <input disabled class="form-control" type="text" id="edit_id">
                            </div>
                        </div>
                        <div class="form-group has-success">
                            <label class="col-sm-4 control-label label-font" for="edit_seq">顺序</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="number" id="edit_seq" title="顺序需为非零整数" onchange="check('edit_seq');">
                            </div>
                        </div>
                        <div class="form-group has-success label-font">
                            <label class="col-sm-4 control-label" for="edit_name">角色名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" id="edit_name" title="名字必须填写" onchange="check('edit_name');">
                            </div>
                        </div>
                        <div class="form-group has-success label-font">
                            <label class="col-sm-4 control-label" for="edit_description">角色描述</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" rows="6" id="edit_description"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="edit();">修改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!-- 模态框（Modal） 授权 -->
    <div class="modal fade" id="resourceModal" tabindex="-1" role="dialog" aria-labelledby="resourceModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="resourceModalLabel">
                        授权
                    </h4>
                </div>
                <div class="modal-body"  style="height:800px; overflow:scroll;">
                    <table id="treeView-checkable"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="authorize();">授权</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） 新增 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="min-width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="addModalLabel">
                        添加角色信息
                    </h2>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-success">
                            <label class="col-sm-4 control-label label-font" for="id">角色编号</label>
                            <div class="col-sm-8">
                                <input disabled class="form-control" type="text" id="id">
                            </div>
                        </div>
                        <div class="form-group has-error">
                            <label class="col-sm-4 control-label label-font" for="seq">顺序</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="number" id="seq" title="顺序需为非零整数" onchange="check('seq');">
                            </div>
                        </div>
                        <div class="form-group has-error">
                            <label class="col-sm-4 control-label label-font" for="name">角色名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" id="name" title="名字必须填写" onchange="check('name');">
                            </div>
                        </div>
                        <div class="form-group has-success ">
                            <label class="col-sm-4 control-label label-font" for="description">角色描述</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" rows="6" id="description" ></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="add();">添加</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


<!-- JavaScript files-->
<!-- jquery.js -->
<script src="../../static/js/lib/jquery.min.js" th:src="@{/js/lib/jquery.min.js}"></script>
<!-- Bootstrap.js -->
<script src="../../static/js/lib/bootstrap3.4.1.min.js" th:src="@{/js/lib/bootstrap3.4.1.min.js}"></script>
<!-- Bootstrap-table.js -->
<script src="../../static/js/lib/bootstrap-table.min.js" th:src="@{/js/lib/bootstrap-table.min.js}"></script>
<script src="../../static/js/lib/bootstrap-table-zh-CN.min.js" th:src="@{/js/lib/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2.js -->
<script src="../../static/js/lib/sweetalert.min.js" th:src="@{/js/lib/sweetalert.min.js}"></script>
<script src="../../static/js/lib/es6-promise.auto.min.js" th:src="@{/js/lib/es6-promise.auto.min.js}"></script>
<!-- jquery-ui.js -->
<script src="../../static/js/lib/jquery-ui.min.js" th:src="@{/js/lib/jquery-ui.min.js}"></script>
<!-- bootstrap-select.js -->
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../../static/js/dragModel.js" th:src="@{/js/dragModel.js}"></script>
<!-- Bootstrap-treeTable js-->
<script src="../../static/js/lib/bootstrap-table-treegrid.js" th:src="@{/js/lib/bootstrap-table-treegrid.js}"></script>
<script src="../../static/js/lib/jquery.treegrid.min.js" th:src="@{/js/lib/jquery.treegrid.min.js}"></script>
<script>
    /** 初始化 */
    let authorizeId;
    let $table = $('#table');
    let $tree = $('#treeView-checkable');
    let datas;

    // 服务器分页获取数据
    function getServerPaging(node, url, queryParams) {
        initTable(node, url, [10, 20, 30, 40, 50, 60, "All"], queryParams, [{
            checkbox: true
        }, {
            field: 'name',
            title: '角色名称',
            width: '170px',
            formatter: stringFormatter
        },  {
            field: 'createTime',
            title: '创建时间',
            width: '170px',
            formatter: dateFormatter
        },  {
            field: 'updateTime',
            title: '录入时间',
            width: '170px',
            formatter: dateFormatter
        }, {
            field: 'description',
            title: '角色描述',
            width: '170px',
            formatter: stringFormatter
        },{
            field: 'operation',
            title: '操作',
            width: '275px',
            formatter: operateFormatter // 自定义方法，添加操作按钮
        }]);
    }

    function operateFormatter(value, row, index) {  // 赋予的参数
        return [
            '<button class="btn btn-success view" data-toggle="modal" data-target="#viewModal" onclick="view('+ index +');">查看</button>&nbsp;&nbsp;' +
            '<button class="btn btn-primary view" data-toggle="modal" data-target="#editModal" onclick="initEdit('+ index +');">编辑</button>&nbsp;&nbsp;' +
            '<button class="btn btn-info view" data-toggle="modal" data-target="#resourceModal" onclick="initChecked('+ index +');">授权</button>&nbsp;&nbsp;'+
            '<button class="btn btn-danger view" onclick="deleteOne('+ index +');">删除</button>&nbsp;&nbsp;'
        ].join('');
    }

    // 修改提示框样式
    changeToolTip();

    // 模态框初始化
    dragTheModalDialog();

    $tree.bootstrapTable({
        striped: true,
        cache: true,
        showColumns: true,
        minimumCountColumns: 2,
        searchOnEnterKey: true,
        strictSearch: false,
        idField: 'id',
        columns: [{
            field: 'check',
            checkbox: true,
        }, {
            field: 'name',
            title: '名称' ,
            formatter:iconFormatter
        }],
        // bootstrap-table-treegrid.js 插件配置 -- start
        treeShowField: 'name',
        parentIdField: 'syResourceId',
        onResetView: () => {
            $tree.treegrid({
                initialState: 'expanded',
                treeColumn: 1,
                onChange: function() {
                    $tree.bootstrapTable('resetWidth');
                }
            });

            // 只展开树形的第一级节点
            $tree.treegrid('getRootNodes').treegrid('expand');
        },
        onCheck:function(row) {
            selectChild(row, true);
            selectParentChecked(row);
        },
        onUncheck: function(row) {
            selectChild(row, false);
        },
        // bootstrap-table-treetreegrid.js 插件配置 -- end
    });

    function iconFormatter(value, row) {
        return [
            '&nbsp;&nbsp;<i class="' + row.iconCls + '"></i>&nbsp;&nbsp;' + value
        ].join('');
    }

    // 初始化表格数据
    function initTableDate() {
        getServerPaging($table, "/role-management/getRole", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC" };
        });
    }

    // 初始化表格信息
    function initResource() {
        noParameterPostRequest("/resource-management/getAllResources", result => {
            if (null != result.module) {
                $tree.bootstrapTable("load", result.module);
                datas = result.module;
            } else {
                swal("提示", "系统无任何权限资源", "info");
            }
        });
    }

    // 初始化选择
    function initChecked(index) {
        let rows = $table.bootstrapTable('getData');
        let data = { syRoleId: rows[index].id, };
        authorizeId = rows[index].id;
        parameterPostRequest("/role-management/getResourceIdByRoleId", data, result => {
            $tree.bootstrapTable('uncheckAll');
            $tree.bootstrapTable('checkBy', {field:'id', values: result.module});
        });
    }

    // 初始化数据信息
    function init() {
        initTableDate();
        initResource();
    }
</script>
<script>
    /** 页面逻辑 */
    // 必填的输入框变化
    function check(id) {
        let dumpDateInput = $("#" + id);
        if ("" === dumpDateInput.val()) {
            setInputError(dumpDateInput);
        } else {
            setInputSuccess(dumpDateInput);
        }
    }

    function selectChild(row, checked) {
        for (let i in datas) {
            if (datas[i]["syResourceId"] === row["id"]) {
                $tree.bootstrapTable('checkBy', {field:'id', values: datas[i].id});
                selectChild(datas[i], checked);
            }
        }
    }

    function selectParentChecked(row) {
        for (let i in datas) {
            if (datas[i]["id"] === row["syResourceId"]) {
                $tree.bootstrapTable('checkBy', {field:'id', values: datas[i].id});
                selectParentChecked(datas[i]);
            }
        }
    }

</script>
<script>
    /** 功能 */
    // 过滤
    function filter() {
        let data = [$("#txt_search_name")];

        // 检验用户是否输入过滤参数
        if ("" === data[0].val()) {
            swal("操作提示", "请填写过滤参数", "info");
            return;
        }

        getServerPaging($table, "/role-management/getRole", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", name: data[0].val() };
        });
    }

    // 添加原材料报废记录
    function add() {
        let data = {
            id: $("#id").val(),
            seq: $("#seq").val(),
            name: $("#name").val(),
            description: $("#description").val()
        };
        if ( ''=== data.seq  || '' === data.name) {
            swal("操作提示", "请输入必输入项", "info");
        } else {
            if (data.seq < 0) {
                swal("操作提示", "顺序不能为负数", "info");
            } else {
                parameterPostRequest("/role-management/insert", data, () => {
                    $('#addModal').modal('hide');
                    swal("正确", "添加成功", "success");
                    initTableDate();
                });
            }
        }
    }

    // 查看
    function view(index) {
        let rows = $table.bootstrapTable('getData');
        $("#view_id").text(rows[index].id);
        $("#view_name").text(rows[index].name);
        $("#view_seq").text(rows[index].seq);
        $("#view_description").text(rows[index].description);
    }
    
    // 授权
    function authorize() {
        let temp = { syRoleId: authorizeId };
        let rows = $tree.bootstrapTable('getSelections');
        if (rows.length === 0) {
            swal("操作提示", "请选择权限", "info");
        } else {
            parameterPostRequest("/role-management/deleteByRoleId", temp, () => {
                for (let i = 0; i < rows.length; ++i) {
                    let data = {
                        syResourceId: rows[i].id,
                        syRoleId: authorizeId
                    };
                    parameterPostRequest("/role-management/insertRoleResource", data, () => { });
                }
                $('#resourceModal').modal('hide');
                swal("正确", "授权成功", "success");
            })
        }
    }

    // 编辑
    function initEdit(index) {
        setInputSuccess($("#edit_seq"));
        setInputSuccess($("#edit_name"));
        let rows = $table.bootstrapTable('getData');
        $("#edit_id").val(rows[index].id);
        $("#edit_seq").val(rows[index].seq);
        $("#edit_name").val(rows[index].name);
        $("#edit_description").val(rows[index].description);
    }
    function edit() {
        let data = {
            id: $("#edit_id").val(),
            seq: $("#edit_seq").val(),
            name: $("#edit_name").val(),
            description: $("#edit_description").val()
        };
        if ('' === data.id || '' === data.name || '' === data.seq ) {
            swal("操作提示", "请输入必输入项", "info");
        } else {
            if (data.seq < 0) {
                swal("操作提示", "顺序不能为负数", "info");
            } else {
                parameterPostRequest("/role-management/updateRole", data, () => {
                    $('#editModal').modal('hide');
                    swal("正确", "编辑成功", "success");
                    initTableDate();
                });
            }
        }
    }

    // 删除
    function deleteOne(index) {
        dialog("确定删除吗？", () => {
            let data = { "id": $table.bootstrapTable('getData')[index].id };
            parameterPostRequest("/role-management/delete", data, () => {
                swal("正确", "删除成功", "success");
                initTableDate();
            });
        });
    }
</script>

</body>

</html>